
const menuToggle = document.querySelector(".menuToggle"); // 页面右上角的切换按钮
const sidebar = document.querySelector(".sidebar"); // 侧边栏
const topNav = document.querySelector(".top-nav"); // 顶栏

// 页面
const posterWall = document.querySelector(".poster-wall");
const settingsPage = document.querySelector(".settings-page"); // 获取设置页面元素
const tagsPage = document.querySelector(".tags-page"); // 获取 tags 页面元素
const circlePage = document.querySelector(".circle-page"); // 社团
const vaPage = document.querySelector(".va-page"); // 声优
const favoritePage = document.querySelector(".favorite-page"); // 喜爱

// 侧边栏按钮
const settingsButton = document.querySelector("#settingsButton"); // 获取侧边栏设置按钮
const tagsButton = document.querySelector("#tagsButton"); // 侧边栏 tags 按钮
const allPostersBtn = document.querySelector('#allPostersBtn'); // 侧边栏 全部 按钮
const circleButton = document.querySelector('#circleButton'); // 侧边栏 社团 按钮
const vaButton = document.querySelector('#vaButton'); // 侧边栏 声优 按钮
const favoriteButton = document.querySelector('#favoriteButton'); // 侧边栏 tags 按钮

const Menulist = document.querySelectorAll(".menu-list li"); // 侧边栏的每一项

// 触发动画
menuToggle.onclick = function () {
    menuToggle.classList.toggle("active");
    sidebar.classList.toggle("active");
    topNav.classList.toggle("active");
    posterWall.classList.toggle("active"); // 同时触发海报墙的动画
    settingsPage.classList.toggle("active");
    tagsPage.classList.toggle("active");
    vaPage.classList.toggle("active");
    circlePage.classList.toggle("active");
    favoritePage.classList.toggle("active");
};

document.addEventListener("DOMContentLoaded", function () {
    // 获取所有的星级评分元素
    const rateElements = document.querySelectorAll('.rate');

    rateElements.forEach(function (rateElement) {
        // 从 data-rating 属性中获取评分值
        const rating = rateElement.getAttribute('data-rating');

        // 计算出需要的宽度 (假设 rating 是 0-5 的评分)
        const width = (rating / 5) * 120;

        // 动态设置 .rate::after 的宽度
        rateElement.style.setProperty('--rate-width', `${width}px`);
    });
});



// 监听设置按钮的点击事件，显示设置页面，隐藏海报墙
settingsButton.onclick = function (e) {
    e.preventDefault(); // 阻止默认链接跳转行为
    settingsPage.style.display = "block"; // 显示设置页面
    posterWall.style.display = "none"; // 隐藏海报墙
    favoritePage.style.display = "none";
    vaPage.style.display = "none";
    circlePage.style.display = "none";
    tagsPage.style.display = "none";
};

tagsButton.onclick = function (e) {
    e.preventDefault(); // 阻止默认链接跳转行为
    tagsPage.style.display = "block";
    posterWall.style.display = "none";
    settingsPage.style.display = "none"; 
    favoritePage.style.display = "none";
    vaPage.style.display = "none";
    circlePage.style.display = "none";
};

allPostersBtn.onclick = function (e) {
    e.preventDefault();
    posterWall.style.display = "flex";
    settingsPage.style.display = "none";
    tagsPage.style.display = "none";
    favoritePage.style.display = "none";
    vaPage.style.display = "none";
    circlePage.style.display = "none";
};

favoriteButton.onclick = function (e) {
    e.preventDefault();
    favoritePage.style.display = "flex";
    posterWall.style.display = "none";
    settingsPage.style.display = "none";
    tagsPage.style.display = "none";
    vaPage.style.display = "none";
    circlePage.style.display = "none";
};

vaButton.onclick = function (e) {
    e.preventDefault();
    vaPage.style.display = "block";
    posterWall.style.display = "none";
    settingsPage.style.display = "none";
    tagsPage.style.display = "none";
    favoritePage.style.display = "none";
    circlePage.style.display = "none";
};

circleButton.onclick = function (e) {
    e.preventDefault();
    circlePage.style.display = "block";
    posterWall.style.display = "none";
    settingsPage.style.display = "none";
    tagsPage.style.display = "none";
    favoritePage.style.display = "none";
    vaPage.style.display = "none";
};

function activeLink() {
    Menulist.forEach((item) => item.classList.remove("active"));
    this.classList.add("active");
}

Menulist.forEach((item) => item.addEventListener("click", activeLink));